# 第二章 选择正确的方式开发小程序

# 2.1 多元化的小程序开发方式

早期的小程序开发方式比较单一,只能用官方提供的模式进行开发。但随着小程序生态的逐步完善,我们开发者的选择变的多样化起来。

现在,我们不仅可以选择使用小程序原生开发的方式,还可以选择第三方框架来开发(下个小节我们将简单介绍下小程序的各种第三方框架)。

从开发模式上来讲,小程序现在也可以使用组件化的开发方式来构建;还可以通过npm来安装各种第三方库来加快小程序的开发效率。

从开发语言上来讲,我们不仅可以使用JavaScript来开发,还可以使用TypeScript来开发。

从小程序后端技术栈上来说,我们不仅可以使用传统的PHP/Java/Python/Node等服务端语言来开发,还可以选择使用小程序的”云开发“。

但选择多未必是好事。面对如此多的技术选型,即使有经验的开发者也不免会感到困惑,我到底应该选择怎样的方式来开发小程序?看完本章节,你会有一些自己的心得和想法。

##2.2 原生开发与第三方框架 什么是原生开发方式?这个概念其实挺难用文字去准确界定的,因为官方也没有对原生开发方式作出定义。这个概念其实也是不言而喻的,我们按照小程序官方文档中的描述去开发小程序就属于原生开发的方式。

其实不需要去定义什么是“原生开发”,我们只需要去了解一些第三方小程序框架后就明白原生开发的概念了。出现众多第三方框架的原因主要有一下几点:

  • 小程序的原生开发方式有一些小小的缺点:比如不能直接使用LESS/SASS、没有官方的过滤器支持(但过滤器可以使用小程序的wxs来实现)、没有状态管理、不支持双向数据绑定、目前不支持Asncy/Await等问题。这些缺点让习惯了现代化前端开发理念的开发者不太舒服

  • 上个章节中,我们特别介绍了现在的小程序其实并不单单只有微信小程序,还有支付宝、百度等小程序。如果一个产品需要同时开发微信、支付宝、百度三个版本的小程序,理论上我们需要写3份代码调用三个不同平台的小程序API。可不可以写一份代码,让这一份代码可以在三个不同的小程序平台上运行?

  • 一些开发者希望使用Vue、React等成熟的框架来开发小程序

基于以上几点需求,第三方框架便应用而生了。目前比较知名的几个第三方框架分别是:

  • wepy 腾讯团队开源的一款类Vue小程序开发框架
  • mpvue 美团出品。特点是使用Vue开发小程序,支持微信小程序、百度智能小程序、头条小程序和支付宝小程序
  • Taro 京东凹凸实验室开源的一款小程序框架。特点是使用React生态开发小程序,理论上来说可以编写一套代码,通过编译的方式将源代码编译成可以在不同端(微信/百度/支付宝/字节跳动小程序、H5、React-Native 等)运行的代码
  • Mpx 滴滴出品。可以使用Vue来编写小程序,目前可以支持微信小程序和支付宝小程序的开发

理论上来说,滴滴的Mpx和其他3个框架还是有一些区别的。wepy、mpvue和Taro均是将其他语法规范转换成小程序的语法规范,这个过程你可以称为编译或者转译。但Mpx不太一样,Mpx是一款小程序的增强型框架,并没有更改小程序本身的语法规范。综合比较,虽然Mpx相对于其他框架并没有非常强的亮点,但笔者认为Mpx的做法更为理智。

如果算上小程序原生开发,开发者目前有5种开发方案可以选择。很难选择。

第三方框架似乎编写一份代码就可以同时运行在多个小程序平台上,但这其实只是一种看似的美好。一份代码编译运行在多端平台上并不是像我们所想的这么简单,编译过后依然需要开发者手动去针对不同平台调整部分代码。再者,不同平台的小程序更新速度很快,很多新的功能、组件第三方框架是不能够很快支持的。

还有一点要提醒开发者,使用第三方框架依然需要非常了解原生小程序,并不是说使用第三方框架就不需要学习原生小程序了。这极高的学习成本是否要付出,确实需要我们仔细思考下。

笔者认为技术的推层出新必须是以减少开发成本和提高开发者开发效率为目的。如果使用第三方框架不能提高你的效率、节约你的时间,那为什么要付出更多的学习成本来学习和使用第三方框架呢。

最后,微信小程序正处于高速发展的时期,越来越丰富的功能将很快弥补现在的缺陷。很多第三方框架所宣传的亮点诸如组件化开发、npm支持、可以使用promise等等这些问题,现在版本的小程序已经全部支持和解决。那剩下的缺陷未来就不会解决吗?

跟着官方走永远是最省心的一种方案。微信小程序当初没有选择依托Vue/React/AngularJS三大框架作为小程序的开发基础,而是自己做了一套开发模式和运行机制,就足以证明微信是希望有自己的一套运行机制和开发规范的。微信原生开发会借鉴三大框架的优点,但他不会以这些框架为基础,因为这样会让小程序的发展缺乏自主性。

笔者认为如果你有以下理由,可以选择使用第三方框架:

  • 我就是想使用Vue、React开发小程序
  • 我确实需要同时开发微信/支付宝/头条/百度小程序,且我确定使用第三方框架的成本低于原生开发

其他的理由,笔者都不太建议使用第三方框架。当然,这只是笔者的观点,我觉得我们开发者都应当有自己的观点和选择,其他人的观点,永远都只能作为你参考的依据。

# 2.3 npm的支持

现在版本的小程序已支持npm。npm是一种包管理机制,在npm的官方网站已经存在了海量的第三方包,这些包都可以通过npm命令来快速安装和使用。但需要提醒大家的是,并不是所有包都可以用于小程序。开发者在使用npm时应当仔细阅读包的相关说明。

# 2.4 微信小程序组件库:Lin-UI

前文中我们谈到现在版本的小程序已经支持自定义组件了。自定义组件机制是笔者认为小程序这几年更新的最重要机制。它不仅影响我们开发者开发小程序的思维和结构,我们还可以使用其他开发者已经开发好的组件库以提高小程序的开发效率。我们不需要从0开始构建一款小程序了,许多现成的组件都可以直接拿来使用。在这本书中,我们将深入学习小程序自定义组件的开发,因为组件化编程对于提高代码的复用性和分离性有极大的帮助,它可以让我们的代码变得非常的简洁。

除了使用组件化的编程思维开发微信小程序,我们还可以使用一些优秀的地方组件库:

Lin-UI是笔者团队开发的一款微信小程序原生组件库,使用Lin-UI可以大幅提升微信小程序的开发效率,许多复杂的组件都不需要开发者自己编写,直接使用Lin-UI中的组件即可。Lin-UI目前提供高达32款常用的组件,且组件的数量还在不断的扩展。

IMG_2562 图:Lin-UI Demo首页 IMG_2563 图:Lin-UI Demo 视图组件

Lin-UI是一个开源的项目,且提供完整的在线demo供开发者预览,同时也配备了非常详细的文档供开发者学习。

开发者可通过访问林间有风团队的官网:http://www.7yue.pro 详细了解Lin-UI,也可以在微信中搜索小程序 Lin-UI 来浏览Lin-UI的示例demo。以下是Lin-UI的相关资料:

  • 官网:http://www.7yue.pro
  • GitHub: https://github.com/TaleLin/lin-ui
  • 开发文档:http://doc.mini.7yue.pro

在本书中,我们也将讲解Lin-UI的使用方式和一些经典案例。

在这里,特别感谢林间有风团队Lin-UI项目的开发者6个月来的努力,带来了这款优秀的开源组件库: @杨鹏程 @王娜 @张寸起 @齐倩 以及Lin-CMS的主要开发者: @pedro @王一飞 @龚坚圣 @付家乐 @圈圈

# 2.5 使用TypeScript开发微信小程序

现在版本的小程序不仅可以使用JavaScript开发,还可以使用TypeScript进行开发。为了保证本书的通用性,本书所有代码均使用JavaScript进行编写。 TypeScript是由微软开发和开源的一种语言,它JavaScript超集,虽然本书并未使用TypeScript,建议开发者可以尝试使用TypeScript来开发小程序,因为TypeScript相比于JavaScript有非常多的好处。以下是TypeScript的一些主要优势:

  • 小程序目前基本已支持大部分ES6的语法,但是对ES7以及最新的ES标准支持并不完善。如果你想使用一些新标准的语法,使用TypeScript是一个很好的选择
  • TypeScript可为变量指定类型,支持编译阶段的类型检测
  • 语法提示。这将大大的提高我们的编码效率
  • 良好的面向对象支持
  • 开发工具自动重构代码

简而言之,TypeScript让前端可以拥有Java/C#语言的开发特性,更好的在编译阶段就可以检测出各种错误。使用TypeScript的代码将更加易于维护和扩展。也许小项目不需要使用TS,但复杂的中大型项目使用TS是一个很好的选择。Angular2在很早时就将TS列为主要开发语言,Vue3.0的版本的核心库也将由TS重写。

# 2.6 微信小程序后端解决方案:云开发简介

开发者需要了解的是,一个完整的微信小程序其实是分为前端和服务端两部分的。但微信小程序的服务端其实和其他应用程序(Web、App等)没有太大的区别,均是通过服务端提供API来供小程序前端调用。限于篇幅,本书不会对服务端编程做过多的讲解,开发者可自行了解和学习PHP/Java/Python/NodeJS等主流服务器语言来构建微信小程序服务端。

除了选择上文所描述的服务端语言来构建常规的微信小程序服务端,微信还提供了云开发这种快速构建服务端的模式。相对于传统服务端编程语言和框架,云开发充分和小程序结合,为开发者提供了极为便利的小程序服务端编程模式。下面我们一起来看看云开发的特点、优势以及缺点。小程序云开发主要提供了三大基础能力,这三种能力也就是云开发的特色:

  1. 云函数:在云端运行运行的代码
  2. 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库
  3. 在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理

如果要理解云开发这三大基础能力给开发者带来怎样的便利,我们必须回顾或者了解一下非云开发的完整小程序解决方案:

  • 开发者需要购买一台服务器用来部署服务端代码
  • 开发者需要在服务器上安装操作系统、HTTP服务器、对应开发语言的环境、数据库环境
  • 开发者需要购买HTTPS证书并配置证书(小程序只能访问HTTPS协议的服务端接口)
  • 开发者还需要配置静态资源服务以及购买CDN缓存,并需要极高的带宽用以支撑图片等静态资源的快速访问;或者直接使用OSS等云服务(静态资源存储是相当贵的)
  • 许多前端开发者是不懂服务端开发的,学习PHP/Java/Python等服务端语言也是不可能的,那如果前端开发者想独立完成一个小程序应用怎么办呢?云开发可以在一定程度上解决这个问题

即使现在我们可以选择使用腾讯云/阿里云等云服务(注意区别云服务和云开发),但配置依然非常繁琐。小程序云开发可以很好的解决以上问题。

小程序云开发已经为开发者准备好了包括数据库在内的所有开发环境,开发者只需要直接操作数据库即可;此外,云开发还提供了一块存储空间可以作为静态资源服务器使用。这是云开发对于传统开发模式繁琐环境配置的简化。

前端开发者开发服务端API最大的难点有两个:

  1. 很难掌握服务端的开发语言和框架
  2. 很难掌握关系型数据库(如MySQL)的操作

但云开发无需开发者掌握传统的服务端编程语言,只需要开发者熟悉JavaScript即可完成服务端的开发;云开发的数据库使用的是基于JSON的非关系型数据库,他的操作并没有MySQL这么复杂。

你甚至可以直接在小程序前端中直接访问数据库操作数据(在传统的应用程序中,前端是绝对不可能直接操作数据库的);如果前端的操作无法满足业务需求,你还可以在云端编写云函数,然后在小程序前端中调用。而云函数是基于NodeJS的,这对熟悉JavaScript的开发者来说,也并不困难。

总体来说,小程序云开发确实是一种比较好的开发模式。但任何事物都有其两面性,鱼和熊掌是不可兼得的,云开发在简化开发流程的同时也降低了开发的灵活性,一些复杂的应用是不适合用云开发的。

此外,截止目前,云开发还不能再Web端调用的。对于一个完整的小程序,还需要有后台管理系统,而后台管理系统(我们也可以称为CMS)通常都是网页的形式。如果不支持Web端调用,CMS是很难完成的。这里也希望微信能够进一步的完善云开发的机制。

本书旨在详细讲解小程序前端开发,并不会讲解服务端和云开发,关于云开发更详尽的介绍,请参考官方文档。

最后更新: 2021-08-12 13:31:59